<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        canvas {
            margin: 50px auto 0;
            display: block;
            background: yellow;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
</canvas>
</body>
</html>

<script>
    const ctx = document.getElementById('canvas')
    const gl = ctx.getContext('webgl')

    // step1: 创建着色器源码
    // 顶点着色器（默认高精度，不需要手动指定）
    const VERTEX_SHADER_SOURCE = `
        attribute vec4 aPosition;
        attribute float aPointSize;
        void main() {
            gl_Position = aPosition; // 位置
            gl_PointSize = aPointSize; // 尺寸
        }
`
    // 片元着色器（需要手动指定精度）
    const FRAGMENT_SHADER_SOURCE = `
        void main() {
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
    `
    const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

    const aPosition = gl.getAttribLocation(program, 'aPosition');
    const aPointSize = gl.getAttribLocation(program, 'aPointSize');

    /**
     * step1: 位置信息处理
     */
    // 创建顶点数据
    const points = new Float32Array([
        -0.5, -0.5,
        0.5, -0.5,
        0.0, 0.5,
    ])

    // 创建内存区域
    const buffer = gl.createBuffer();
    // 绑定缓冲区对象
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    // 顶点数据写入到缓冲区
    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
    // 指定给attribute变量
    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
    // 激活attribute
    gl.enableVertexAttribArray(aPosition); // 位置信息

    /**
     * step2: 尺寸信息处理
     */
    // 创建顶点数据
    const size = new Float32Array([
        10.0,
        20.0,
        30.0,
    ])

    // 创建内存区域
    const sizeBuffer = gl.createBuffer();
    // 绑定缓冲区对象
    gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuffer);
    // 顶点数据写入到缓冲区
    gl.bufferData(gl.ARRAY_BUFFER, size, gl.STATIC_DRAW);
    // 指定给attribute变量
    gl.vertexAttribPointer(aPointSize, 1, gl.FLOAT, false, 0, 0);
    // 激活attribute
    gl.enableVertexAttribArray(aPointSize); // 尺寸信息

    gl.drawArrays(gl.POINTS, 0, 3) // 绘制点

</script>
